<template>
    <div id="mapContainer" style="width: 100%; height: 400px"></div>
    <div class="input-card" style="
        position: absolute;
        top: 15px;
        z-index: 999;
        width: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid black;
        border-radius: 5px;
      ">
        <button class="btn" @click="createPolygon" style="
          margin-top: 5px;
          margin-bottom: 5px;
          border: 1px solid;
          width: 80%;
          border-radius: 15px;
        ">
            新建
        </button>
        <button class="btn" @click="open" style="margin-bottom: 5px; border: 1px solid; width: 80%; border-radius: 15px">
            开始编辑
        </button>
        <button class="btn" @click="close" style="margin-bottom: 5px; width: 80%; border: 1px solid; border-radius: 15px">
            结束编辑
        </button>
        <button class="btn" @click="clearMarker"
            style="margin-bottom: 5px; width: 80%; border: 1px solid; border-radius: 15px">
            清除固定点
        </button>
        <button class="btn" @click="addMarker"
            style="margin-bottom: 5px; width: 80%; border: 1px solid; border-radius: 15px">
            添加固定点
        </button>
        <button class="btn" @click="updateContent"
            style="margin-bottom: 5px; width: 80%; border: 1px solid; border-radius: 15px">
            更新固定点
        </button>
    </div>
</template>
  
  
<script setup lang="ts">
import { onMounted, reactive, toRefs, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios';
var markers: any = []
let map: any = null
let polyEditor: any = ''
const positions = [
    [104.696953, 28.793704],
    [104.678757, 28.805814],
    [104.667127, 28.776026]
]
let markerd: any = ''
const paths = [[[104.696363, 28.793883],
[104.69691, 28.794071],
[104.6972, 28.79361],
[104.696352, 28.793018],
[104.696266, 28.793159],
[104.696567, 28.793432],], [
    [104.676761, 28.806838],
    [104.679293, 28.808775],
    [104.680581, 28.807384],
    [104.679765, 28.806632],
    [104.679937, 28.806293],
    [104.677341, 28.804432],
], [
    [104.664927, 28.774653],
    [104.667738, 28.778076],
    [104.669026, 28.777042],
    [104.665914, 28.773939],
]];
const createPolygon = () => {
    polyEditor.close()
    polyEditor.setTarget()
    polyEditor.open()
}
const close = () => {
    polyEditor.close()
    console.log(polyEditor, map, 5566)
}
const open = () => {
    polyEditor.open()
}

function clearMarker() {
    markers[1].setMap(null)
}

function addMarker() {
    markerd = new AMap.Marker({
        icon: new AMap.Icon({
            size: new AMap.Size(30, 40), // 设置图标大小
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            imageSize: new AMap.Size(30, 40) // 设置图标图片大小
        }),
        position: [104.662347, 28.778041],
        offset: new AMap.Pixel(-13, -30)
    })
    markerd.setMap(map)
}

function updateContent() {
    if (!markers) {
        return
    }
    // 自定义点标记内容
    var markerContent = document.createElement('div')

    // 点标记中的图标
    var markerImg = document.createElement('img')
    markerImg.className = 'markerlnglat'
    markerImg.src = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
    markerImg.setAttribute('width', '30px')
    markerImg.setAttribute('height', '40px')
    markerContent.appendChild(markerImg)

    // 点标记中的文本
    var markerSpan = document.createElement('span')
    markerSpan.className = 'marker'
    markerContent.appendChild(markerSpan)

    markerd.setContent(markerContent) //更新点标记内容
    markerd.setPosition([104.662347, 28.778041]) //更新点标记位置
}
function initMap() {
    window._AMapSecurityConfig = {
        securityJsCode: '41436e65e98651d6c173e1425d3f20ae',
    }
    AMapLoader.load({
        key: "3cdd86f4180028094285661936cbb7d8", // 申请好的WEB端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.PolygonEditor",
            "AMap.Autocomplete",
            "AMap.PlaceSearch",
            "AMap.Scale",
            "AMap.OverView",
            "AMap.ToolBar",
            "AMap.MapType",
            "AMap.PolyEditor",
            "AMap.CircleEditor",
            "AMap.Geolocation",
            "AMap.Geocoder",
            "AMap.Polygon",
            "AMap.AMapUI",], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        map = new AMap.Map("mapContainer", {  //设置地图容器id
            viewMode: "2D",    //是否为3D地图模式
            zoom: 5,           //初始化地图级别
            center: [104.630825, 28.760189], //初始化地图中心点位置
        });
        axios.get("https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=511502").then((geojson) => {
            let outer = [
                new AMap.LngLat(-360, 90, true),
                new AMap.LngLat(-360, -90, true),
                new AMap.LngLat(360, -90, true),
                new AMap.LngLat(360, 90, true),
            ];
            console.log(geojson.data);

            let pathArray = [
                outer, //外边界
                geojson.data.features[0].geometry.coordinates[0][0]
                //内边界需要遮罩区域
            ];
            var polygon = new AMap.Polygon({
                pathL: pathArray,
                strokeColor: "rgba(190, 161, 58, 1)",
                strokeWeight: 2,
                fillColor: "rgba(0,0,0,.5)",
            });
            polygon.setPath(pathArray);
            map.add(polygon);
        });

        polyEditor = new AMap.PolygonEditor(map)
        //图标属性
        for (var i = 0, marker; i < positions.length; i++) {
            marker = new AMap.Marker({
                map: map,
                icon: new AMap.Icon({
                    size: new AMap.Size(30, 40), // 设置图标大小
                    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-' + (i + 1) + '.png',
                    imageSize: new AMap.Size(30, 40) // 设置图标图片大小
                }),
                position: positions[i],
                anchor: 'bottom-center'
            })

            markers.push(marker)
        }
        //多边形划分
        for (let i = 0; i < paths.length; i++) {
            const polygons = new AMap.Polygon({
                path: paths[i]
            });
            map.add(polygons);
            polyEditor.addAdsorbPolygons([polygons]);
            polygons.on('dblclick', () => {
                polyEditor.setTarget(polygons);
                polyEditor.open();
            });

        }
        map.setFitView()
        polyEditor.on('add', function (data) {
            const polygon = data.target
            polyEditor.addAdsorbPolygons(polygon)

            polygon.on('dblclick', () => {
                polyEditor.setTarget(polygon)
                polyEditor.open()
                console.log(5566)
            })
        })
        polyEditor.open()
    }).catch(e => {
        console.log(e);
    })
}
onMounted(() => {
    initMap()

})

</script>